<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/list.css" rel="stylesheet" />
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/ajax.js"></script>
		<script type="text/javascript">
//		if(localStorage.getItem("zhongchou").length>1){
//			localStorage.setItem("zhongchou","");//清空本地数据
//		};
		</script>
</head>
	<body id="pullrefresh">
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						
		   <li class="friend-list" id="friend-listb">
            	<!--<div class="img16-8">-->
            		<a href="javascript:;" >
                			
                			<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>筹备</div>
                     <div class="img-title">距离开机还有：96天</div>
                  <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             <!--</div>-->
            </li>
					</div>
					<div class="mui-slider-item">
						<li class="friend-list" id="friend-listb">
            	<!--<div class="img16-8">-->
            		<a href="javascript:;" >
                			
                			<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>院线</div>
                     <div class="img-title">距离开机还有：96天</div>
                      <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             <!--</div>-->
            </li>
					</div>
					<div class="mui-slider-item">
						<li class="friend-list" id="friend-listb">
            	<div class="img16-8 imgcenter">
            		<a href="javascript:;" >
                			
                			<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>筹备</div>
                     <div class="img-title">距离开机还有：96天</div>
                      <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             </div>
            </li>
					</div>
					<div class="mui-slider-item">
						<li class="friend-list" id="friend-listb">
            	<div class="img16-8">
            		<a href="javascript:;" >
                			
                			<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>筹备</div>
                     <div class="img-title">距离开机还有：96天</div>
                      <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             </div>
            </li>
					</div>
					<div class="mui-slider-item">
						<li class="friend-list" id="friend-listb">
            	<div class="img16-8">
            		<a href="javascript:;" >
                			
                			<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>筹备</div>
                     <div class="img-title">距离开机还有：96天</div>
                      <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             </div>
            </li>
					</div>
					<div class="mui-slider-item">
						<li class="friend-list" id="friend-listb">
            	<div class="img16-8">
            		<a href="javascript:;" >
                			
                			<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>筹备</div>
                     <div class="img-title">距离开机还有：96天</div>
                     <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             </div>
            </li>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<li class="friend-list" id="friend-listb">
            	<div class="img16-8">
            		<a href="javascript:;" >
                			
                	<div class="img16-8a imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class='kuaia'>筹备</div>
                     <div class="img-title">距离开机还有：96天</div>
                     <p class="img-p">急需：<span>演员，摄影师，酒店赞助</span></p>
                    <div class="tiao">
                			<div class="tiao-a"></div>
                			</div>
                			
            		</a>
             </div>
            </li>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
<div class="friend-list-left"id="friend-list">
				<!--<div style="background: #007AFF; height: auto;position: absolute;">-->
					<div class="btn-right">筹备</div>
			    <div class="list-head">
			       <img src="../datu.jpg" alt=""/>[制片人] [导演]
			    	<p>老于头  2018-02-05</p>
			    	<p >能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div>
			    	<a href="javascript:;">
			        <div class="imgx3 imgleft imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class="imgx3 imgleft imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class="imgx3 imgleft imgcenter" >
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class="imgx3 imgleft imgcenter" >
                    <img src="../datu.jpg" alt=""/>
                    </div></a>
                    <div class="list-foot">
                    	<a href="javascript:;"><p style="width: 33%;float: left;"onclick="">评论：1234 </p></a>
                    	<a href="javascript:;"><p style="width: 33%;float: left;"onclick="">赞：10100</p></a>
                    	<a href="javascript:;"><p style="width: 33%;float: left;"onclick="">分享10011</p></a>
                    </div>
			    <div class="list-head"><img  src="../datu.jpg" alt=""/>老于头<p>2018-02-05</p>
			    	<p>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div>
			    
			       <a href="javascript:;">
			        <div class="imgx2 imgleft imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class="imgx2 imgleft imgcenter">
                    <img src="../datu.jpg" alt=""/>
                    </div>
			        </a>
			  <p style="clear:left;padding-bottom:0px;"><span>评论：1234  赞：10100</span></p>

			    	<div style="width: 100%;float: left;text-align:left;font-size: 15px;"><img style="width: 38px;height:38px;margin-left:1px;margin-right:2px;float: left;" src="../datu.jpg" alt=""/>老于头<div style="color: #6D6D72;">2018-02-05</div></div>
			    	<p style="bottom:-10px;">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			        <a href="javascript:;">
                    <div class="imgx1 imgleft imgcenter">
                    <img src="../datu.jpg" alt=""/></div></a>
			       <p class="pleft" style="padding-bottom:0px;"><span>评论：1234  赞：10100</span></p>


			    	<div style="width: 100%;float: left;text-align:left;font-size: 15px;"><img style="width: 38px;height:38px;margin-left:1px;margin-right:2px;float: left;" src="../datu.jpg" alt=""/>老于头<div style="color: #6D6D72;">2018-02-05</div></div>
			    	<p class="pleft" style="bottom:-10px;">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			        <a href="javascript:;">
			        	<div class="imgx3 imgleft imgcenter ">
                    <img src="../datu.jpg" alt=""/>
                    </div>
                    <div class="imgx3 imgleft imgcenter">
                    <img src="../datu.jpg" alt=""/></div>
                    <div class="imgx3 imgleft imgcenter" >
                    <img src="../datu.jpg" alt=""/>
                    </div>
			        </a>
			        <p class="pleft" style="padding-bottom:0px;"><span>评论：1234  赞：10100</span></p>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({  
              pullRefresh: {  
                  container: '#pullrefresh', //触发刷新功能的id标签
                  down: {  //触发下拉函数
                  	contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		              contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
		              contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                      callback: pulldownRefresh
                  },
              up : {//触发上拉
              contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
              contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
              callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
              }  
          });  
//* 下拉刷新具体业务实现 
          function pulldownRefresh() { 
              setTimeout(function () { 
              	document.getElementById('friend-list').innerHTML='';
              	Tajax();//获取数据
          	 mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//关闭上拉刷新样式
              }, 1500);  //1500毫秒触发
          } 
          //* 下拉刷新具体业务实现 
function pullupRefresh() { 
      setTimeout(function () { 
      	Tajax();//获取数据
 mui('#pullrefresh').pullRefresh().endPullupToRefresh();//关闭下拉加载样式
}, 1500);  //1500毫秒触发
} 


Tajax();
	function Tajax(){
	ajax('POST',home.hos+'/item/list',apptoken,function(data){
//	result=injsonstr(data,'item','id');
	result=JSON.parse(data);
	alert(data);
	jsonarrfor(result);
            },'text');            
	}  
function jsonarrfor(result){
//	alert(result);
	rpic="";
	var mess=""; 
for(var i=0;i<result.length;i++)
{
if(result[i].pic!=null){
	pd=result[i].pic.indexOf(",")==-1;//判断字符串里是否含有逗号如果不含有
	if(pd!=-1){var rpic=result[i].pic.split(",");}//如果有逗号即可分割字符串
if(rpic.length<=1){
	classimg="imgx1";
}
if(rpic.length==2){
	classimg="imgx2";
}
if(rpic.length>=3){
	classimg="imgx3";
}
} 
var pic="";
for(var ib=0;ib<rpic.length && ib<3;ib++)
{  
	pic+='<div class="imgcenter '+classimg+' imgleft"><img src="'+home.uploads+'/shop/'+rpic[ib]+'"/></div>';
 }
	if(!result[i].headimg){
		headimg=home.uploads+"/user/a.jpg";
	}else{
		headimg=home.uploads+"/user/"+result[i].headimg;
	}  
	document.getElementById('friend-list').innerHTML+='<li id="'+result[i].id+'" onclick="hang(this)"><div class="btn-right">'+result[i].status+'</div><div class="list-head"><img src="'+headimg+'"/>【'+result[i].classname+'】<p>《'+result[i].title+'》</p><p>发布人：'+result[i].username+'  发布时间：'+result[i].createtime+'</p><a href="javascript:;"><p>'+result[i].content.substring(0,19)+'【点击详情】</p></a></div></li>'+pic+' <div class="list-foot"><a href="javascript:;"><p style="width: 33%;float: left;"onclick="">评论：'+result[i].comment+' </p></a><a href="javascript:;"><p style="width: 33%;float: left;"onclick="">赞：'+result[i].zan+'</p></a><a href="javascript:;"><p style="width: 33%;float: left;"onclick="">收藏：'+result[i].create+'</p></a></div><div class="list-head" style="width:100%;margin-bottom: 3px;background:#E3E3E3;height: 5px;"></div>';
} 
}
 mui.plusReady(function() {
//    var loopFlag = false; //默认不支持轮播
      var images = [].slice.call(document.querySelectorAll('.imgleft img'));
      var urls = [];
      images.forEach(function(item) {
        urls.push(item.src);
      });
      mui('.imgleft').on('tap', 'img', function() {
        var index = images.indexOf(this);
        plus.nativeUI.previewImage(urls, {
          current: index,
//        loop: loopFlag,
          indicator: 'number'
        });
      });
    });
//}
	function hang(obj){
		//数据库存储当前点击id值
localStorage.setItem("item_id",obj.id);
//alert(localStorage.getItem("zhongchouid"))
mui.openWindow('message.html');
	}
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
var slider = mui("#slider");
slider.slider({
interval: 2000
});
//		document.getElementById("switch").addEventListener('toggle', function(e) {
//			if (e.detail.isActive) {
//				slider.slider({
//					interval: 2000
//				});
//			} else {
//				slider.slider({
//					interval: 0
//				});
//			}
//		});
	</script>
</html>